<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      :class="['gimi-dialog']"
      :title="props.title"
      :width="props.width"
      :append-to-body="props.appendToBody"
      :close-on-click-modal="false"
      :show-close="props.showClose"
      :destroy-on-close="props.destroyOnClose"
      @open="emits('open')"
      @close="emits('cancel')"
    >
      <template v-if="$slots.header" #header>
        <slot name="header"></slot>
      </template>
      <slot></slot>
      <template v-if="props.showFooter" #footer>
        <div class="dialog-footer">
          <el-button @click="emits('cancel')" v-if="!props.hiddenCancel">取消</el-button>
          <el-button type="primary" :disabled="disabledOk" :loading="okLoading" @click="emits('ok')">
            <i class="confirm-icon" v-if="confirmIcon" :class="confirmIcon"></i>
            {{ okText }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup name="GimiDialog">
import { defineProps, defineEmits, computed } from 'vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true,
    default: false
  },
  title: {
    type: String,
    default: '默认标题'
  },
  width: {
    type: [String, Number],
    default: '480px'
  },
  confirmIcon: String,
  appendToBody: {
    type: Boolean,
    default: true
  },
  showClose: {
    type: Boolean,
    default: false
  },
  hiddenCancel: {
    type: Boolean,
    default: false
  },
  destroyOnClose: {
    type: Boolean,
    default: true
  },
  showFooter: {
    type: Boolean,
    default: true
  },
  okLoading: {
    type: Boolean,
    default: false
  },
  okText: {
    type: String,
    default: '确定'
  },
  disabledOk: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['update:modelValue', 'open', 'cancel', 'ok'])

const dialogVisible = computed({
  get: () => {
    return props.modelValue
  },
  set: val => {
    emits('update:modelValue', val)
  }
})
</script>

<style lang="scss">
.el-dialog.gimi-dialog {
  --el-dialog-margin-top: 120px;
  --el-dialog-border-radius: 10px;
  --el-dialog-title-font-size: 20px;
  --el-text-color-primary: #000;
  --el-dialog-padding-primary: 24px 36px;
  --el-dialog-box-shadow: 0 4px 15px #0000001a,0 1px 4px #0000000d;
  display: flex;
  flex-direction: column;

  .el-dialog__header {
    line-height: 46px;

    .el-dialog__title {
      font-weight: 600;
    }

    .el-dialog__headerbtn .el-dialog__close {
      color: #acc2fd;
    }
  }

  .el-dialog__body {
    height: 0;
    flex: 1;
    padding: 24px 0;

    .el-form-item {
      --el-color-danger: #BF2A2A !important;

      .el-input__wrapper {
        font-size: 15px;
        border: 1px solid transparent;
        transition: none;
        border-radius: 8px;
        &.is-focus {
          border: 1px solid var(--el-input-focus-border-color);
        }
        .el-input__inner {
          line-height: 1.5 !important;
          color: #222;
          font-size: inherit;
        }
        .el-input__prefix-inner {
          i[class^="ri-"] {
            color: #333;
            font-size: 16px;
          }
        }
      }

      &.is-error {
        .el-input__wrapper {
          border-color: var(--el-color-danger);
        }
      }

      .el-form-item__error {
        font-weight: 600;
        padding-top: 4px;
      }
    }
  }

  .el-dialog__footer {
    .dialog-footer {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .el-button {
        letter-spacing: 2px;
        font-size: var(--el-font-size-base);
        .confirm-icon {
          margin-right: 4px;
        }
      }
    }
  }
}
</style>
